<script setup lang="ts">
import { ref } from 'vue';
import { useNurseStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useNurseHelp } from '@/service';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';

const { list } = useNurseHelp();

const { company, imageUrl } = storeToRefs(useNurseStore());

definePageConfig({
    navigationBarTitleText: '客服中心',
    enablePullDownRefresh: true
});
const data = ref();
usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});
async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await list(`?column=createTime&order=asc&pageNo=1&pageSize=100`);

    if (!error && success?.records) data.value = success.records;

    hideLoading();
}
getData();
</script>
<template>
    <basic-layout>
        <view class="m_img w-full pos-fixed pos-left-0 pos-top-0"></view>
        <!-- <custom-navbar title="客服中心" showLeft /> -->
        <view class="w-375px text-primary flex-col-center justify-start m-t-60 m-b-2">
            <view class="m_card w-360px h-75px b-rounded-5 flex-col-center">
                <view class="font-bold">客服热线:{{ company.mobile }}</view>
                <view>{{ company.memo }}</view>
            </view>
            <view v-for="item in data" class="w-360px">
                <view class="m_card b-rounded-3 shadow flex h-75px mt-2 flex-col justify-around items-start">
                    <view class="ml-6">{{ item.name }}</view>
                    <view class="ml-6 flex justify-start items-center">
                        <view>{{ item.phone }}</view>
                        <view class="ml-2">{{ item.contacts }}</view>
                        <view class="ml-2">
                            <nut-button type="primary" size="mini">拨打</nut-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </basic-layout>
</template>

<style lang="scss">
.m_img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-image: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13));
}

.m_card {
    backdrop-filter: blur(10px) brightness(90%);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
</style>
